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css file :

1) lightbox.css :



#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(http://cameraobscur.a.free.fr/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink {
	float: left;
	left: 0px;
}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://cameraobscur.a.free.fr/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://cameraobscur.a.free.fr/lightbox/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #333333;
	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	min-width: 790px;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFFFFF;
	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;
	}
	
	
/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
	display: inline-block;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 
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js file 

1)lightbox.js






// -----------------------------------------------------------------------------------
//
//	Lightbox v2.03
//	by Lokesh Dhakar - http://www.huddletogether.com
//	4/9/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- Object.extend(Element)
	- Array.prototype.removeDuplicates()
	- Array.prototype.empty()

	Lightbox Class Declaration
	- initialize()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Miscellaneous Functions
	- getPageScroll()
	- getPageSize()
	- getKey()
	- listenKey()
	- showSelectBoxes()
	- hideSelectBoxes()
	- showFlash()
	- hideFlash()
	- pause()
	- initLightbox()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "http://cameraobscur.a.free.fr/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "http://cameraobscur.a.free.fr/lightbox/images/closelabel.gif";

var animate = true; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array();
var activeImage;

if (animate == true) {
  overlayDuration = 0.2; // shadow fade in/out duration
  if (resizeSpeed > 10) {
    resizeSpeed = 10;
  }
  if (resizeSpeed < 1) {
    resizeSpeed = 1;
  }
  resizeDuration = (11 - resizeSpeed) * 0.15;
} else {
  overlayDuration = 0;
  resizeDuration = 0;
}

// -----------------------------------------------------------------------------------

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
  getWidth: function (element) {
    element = $(element);
    return element.offsetWidth;
  },
  setWidth: function (element, w) {
    element = $(element);
    element.style.width = w + "px";
  },
  setHeight: function (element, h) {
    element = $(element);
    element.style.height = h + "px";
  },
  setTop: function (element, t) {
    element = $(element);
    element.style.top = t + "px";
  },
  setSrc: function (element, src) {
    element = $(element);
    element.src = src;
  },
  setHref: function (element, href) {
    element = $(element);
    element.href = href;
  },
  setInnerHTML: function (element, content) {
    element = $(element);
    element.innerHTML = content;
  },
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
  for (i = 0; i < this.length; i++) {
    for (j = this.length - 1; j > i; j--) {
      if (this[i][0] == this[j][0]) {
        this.splice(j, 1);
      }
    }
  }
};

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
  for (i = 0; i <= this.length; i++) {
    this.shift();
  }
};

// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Lightbox = Class.create();

Lightbox.prototype = {
  // initialize()
  // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
  // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
  // the function inserts html at the bottom of the page which is used to display the shadow
  // overlay and the image container.
  //
  initialize: function () {
    if (!document.getElementsByTagName) {
      return;
    }
    var anchors = document.getElementsByTagName("a");
    var areas = document.getElementsByTagName("area");

    // loop through all anchor tags
    for (var i = 0; i < anchors.length; i++) {
      var anchor = anchors[i];

      var relAttribute = String(anchor.getAttribute("rel"));

      // use the string.match() method to catch 'lightbox' references in the rel attribute
      if (anchor.getAttribute("href") && relAttribute.toLowerCase().match("lightbox")) {
        anchor.onclick = function () {
          myLightbox.start(this);
          return false;
        };
      }
    }

    // loop through all area tags
    // todo: combine anchor & area tag loops
    for (var i = 0; i < areas.length; i++) {
      var area = areas[i];

      var relAttribute = String(area.getAttribute("rel"));

      // use the string.match() method to catch 'lightbox' references in the rel attribute
      if (area.getAttribute("href") && relAttribute.toLowerCase().match("lightbox")) {
        area.onclick = function () {
          myLightbox.start(this);
          return false;
        };
      }
    }

    // The rest of this code inserts html at the bottom of the page that looks similar to this:
    //
    //	<div id="overlay"></div>
    //	<div id="lightbox">
    //		<div id="outerImageContainer">
    //			<div id="imageContainer">
    //				<img id="lightboxImage">
    //				<div style="" id="hoverNav">
    //					<a href="#" id="prevLink"></a>
    //					<a href="#" id="nextLink"></a>
    //				</div>
    //				<div id="loading">
    //					<a href="#" id="loadingLink">
    //						<img src="http://cameraobscur.a.free.fr/lightbox/images/loading.gif">
    //					</a>
    //				</div>
    //			</div>
    //		</div>
    //		<div id="imageDataContainer">
    //			<div id="imageData">
    //				<div id="imageDetails">
    //					<span id="caption"></span>
    //					<span id="numberDisplay"></span>
    //				</div>
    //				<div id="bottomNav">
    //					<a href="#" id="bottomNavClose">
    //						<img src="http://cameraobscur.a.free.fr/lightbox/images/close.gif">
    //					</a>
    //				</div>
    //			</div>
    //		</div>
    //	</div>

    var objBody = document.getElementsByTagName("body").item(0);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute("id", "overlay");
    objOverlay.style.display = "none";
    objOverlay.onclick = function () {
      myLightbox.end();
    };
    objBody.appendChild(objOverlay);

    var objLightbox = document.createElement("div");
    objLightbox.setAttribute("id", "lightbox");
    objLightbox.style.display = "none";
    objLightbox.onclick = function (e) {
      // close Lightbox is user clicks shadow overlay
      if (!e) var e = window.event;
      var clickObj = Event.element(e).id;
      if (clickObj == "lightbox") {
        myLightbox.end();
      }
    };
    objBody.appendChild(objLightbox);

    var objOuterImageContainer = document.createElement("div");
    objOuterImageContainer.setAttribute("id", "outerImageContainer");
    objLightbox.appendChild(objOuterImageContainer);

    // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    // If animations are turned off, it will be hidden as to prevent a flicker of a
    // white 250 by 250 box.
    if (animate) {
      Element.setWidth("outerImageContainer", 250);
      Element.setHeight("outerImageContainer", 250);
    } else {
      Element.setWidth("outerImageContainer", 1);
      Element.setHeight("outerImageContainer", 1);
    }

    var objImageContainer = document.createElement("div");
    objImageContainer.setAttribute("id", "imageContainer");
    objOuterImageContainer.appendChild(objImageContainer);

    var objLightboxImage = document.createElement("img");
    objLightboxImage.setAttribute("id", "lightboxImage");
    objImageContainer.appendChild(objLightboxImage);

    var objHoverNav = document.createElement("div");
    objHoverNav.setAttribute("id", "hoverNav");
    objImageContainer.appendChild(objHoverNav);

    var objPrevLink = document.createElement("a");
    objPrevLink.setAttribute("id", "prevLink");
    objPrevLink.setAttribute("href", "#");
    objHoverNav.appendChild(objPrevLink);

    var objNextLink = document.createElement("a");
    objNextLink.setAttribute("id", "nextLink");
    objNextLink.setAttribute("href", "#");
    objHoverNav.appendChild(objNextLink);

    var objLoading = document.createElement("div");
    objLoading.setAttribute("id", "loading");
    objImageContainer.appendChild(objLoading);

    var objLoadingLink = document.createElement("a");
    objLoadingLink.setAttribute("id", "loadingLink");
    objLoadingLink.setAttribute("href", "#");
    objLoadingLink.onclick = function () {
      myLightbox.end();
      return false;
    };
    objLoading.appendChild(objLoadingLink);

    var objLoadingImage = document.createElement("img");
    objLoadingImage.setAttribute("src", fileLoadingImage);
    objLoadingLink.appendChild(objLoadingImage);

    var objImageDataContainer = document.createElement("div");
    objImageDataContainer.setAttribute("id", "imageDataContainer");
    objImageDataContainer.className = "clearfix";
    objLightbox.appendChild(objImageDataContainer);

    var objImageData = document.createElement("div");
    objImageData.setAttribute("id", "imageData");
    objImageDataContainer.appendChild(objImageData);

    var objImageDetails = document.createElement("div");
    objImageDetails.setAttribute("id", "imageDetails");
    objImageData.appendChild(objImageDetails);

    var objCaption = document.createElement("span");
    objCaption.setAttribute("id", "caption");
    objImageDetails.appendChild(objCaption);

    var objNumberDisplay = document.createElement("span");
    objNumberDisplay.setAttribute("id", "numberDisplay");
    objImageDetails.appendChild(objNumberDisplay);

    var objBottomNav = document.createElement("div");
    objBottomNav.setAttribute("id", "bottomNav");
    objImageData.appendChild(objBottomNav);

    var objBottomNavCloseLink = document.createElement("a");
    objBottomNavCloseLink.setAttribute("id", "bottomNavClose");
    objBottomNavCloseLink.setAttribute("href", "#");
    objBottomNavCloseLink.onclick = function () {
      myLightbox.end();
      return false;
    };
    objBottomNav.appendChild(objBottomNavCloseLink);

    var objBottomNavCloseImage = document.createElement("img");
    objBottomNavCloseImage.setAttribute("src", fileBottomNavCloseImage);
    objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
  },

  //
  //	start()
  //	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
  //
  start: function (imageLink) {
    hideSelectBoxes();
    hideFlash();

    // stretch overlay to fill page and fade in
    var arrayPageSize = getPageSize();
    Element.setHeight("overlay", arrayPageSize[1]);

    new Effect.Appear("overlay", { duration: overlayDuration, from: 0.0, to: 0.8 });

    imageArray = [];
    imageNum = 0;

    if (!document.getElementsByTagName) {
      return;
    }
    var anchors = document.getElementsByTagName("a");

    // if image is NOT part of a set..
    if (imageLink.getAttribute("rel") == "lightbox") {
      // add single image to imageArray
      imageArray.push(new Array(imageLink.getAttribute("href"), imageLink.getAttribute("title")));
    } else {
      // if image is part of a set..

      // loop through anchors, find other images in set, and add them to imageArray
      for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        if (anchor.getAttribute("href") && anchor.getAttribute("rel") == imageLink.getAttribute("rel")) {
          imageArray.push(new Array(anchor.getAttribute("href"), anchor.getAttribute("title")));
        }
      }
      imageArray.removeDuplicates();
      while (imageArray[imageNum][0] != imageLink.getAttribute("href")) {
        imageNum++;
      }
    }

    // calculate top offset for the lightbox and display
    var arrayPageScroll = getPageScroll();
    var lightboxTop = arrayPageScroll[1] + arrayPageSize[3] / 10;

    Element.setTop("lightbox", lightboxTop);
    Element.show("lightbox");

    this.changeImage(imageNum);
  },

  //
  //	changeImage()
  //	Hide most elements and preload image in preparation for resizing image container.
  //
  changeImage: function (imageNum) {
    activeImage = imageNum; // update global var

    // hide elements during transition
    if (animate) {
      Element.show("loading");
    }
    Element.hide("lightboxImage");
    Element.hide("hoverNav");
    Element.hide("prevLink");
    Element.hide("nextLink");
    Element.hide("imageDataContainer");
    Element.hide("numberDisplay");

    imgPreloader = new Image();

    // once image is preloaded, resize image container
    imgPreloader.onload = function () {
      Element.setSrc("lightboxImage", imageArray[activeImage][0]);
      myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    };
    imgPreloader.src = imageArray[activeImage][0];
  },

  //
  //	resizeImageContainer()
  //
  resizeImageContainer: function (imgWidth, imgHeight) {
    // get curren width and height
    this.widthCurrent = Element.getWidth("outerImageContainer");
    this.heightCurrent = Element.getHeight("outerImageContainer");

    // get new width and height
    var widthNew = imgWidth + borderSize * 2;
    var heightNew = imgHeight + borderSize * 2;

    // scalars based on change from old to new
    this.xScale = (widthNew / this.widthCurrent) * 100;
    this.yScale = (heightNew / this.heightCurrent) * 100;

    // calculate size difference between new and old image, and resize if necessary
    wDiff = this.widthCurrent - widthNew;
    hDiff = this.heightCurrent - heightNew;

    if (!(hDiff == 0)) {
      new Effect.Scale("outerImageContainer", this.yScale, { scaleX: false, duration: resizeDuration, queue: "front" });
    }
    if (!(wDiff == 0)) {
      new Effect.Scale("outerImageContainer", this.xScale, { scaleY: false, delay: resizeDuration, duration: resizeDuration });
    }

    // if new and old image are same size and no scaling transition is necessary,
    // do a quick pause to prevent image flicker.
    if (hDiff == 0 && wDiff == 0) {
      if (navigator.appVersion.indexOf("MSIE") != -1) {
        pause(250);
      } else {
        pause(100);
      }
    }

    Element.setHeight("prevLink", imgHeight);
    Element.setHeight("nextLink", imgHeight);
    Element.setWidth("imageDataContainer", widthNew);

    this.showImage();
  },

  //
  //	showImage()
  //	Display image and begin preloading neighbors.
  //
  showImage: function () {
    Element.hide("loading");
    new Effect.Appear("lightboxImage", {
      duration: resizeDuration,
      queue: "end",
      afterFinish: function () {
        myLightbox.updateDetails();
      },
    });
    this.preloadNeighborImages();
  },

  //
  //	updateDetails()
  //	Display caption, image number, and bottom nav.
  //
  updateDetails: function () {
    Element.show("caption");
    Element.setInnerHTML("caption", imageArray[activeImage][1]);

    // if image is part of set display 'Image x of x'
    if (imageArray.length > 1) {
      Element.show("numberDisplay");
      Element.setInnerHTML("numberDisplay", "Image " + eval(activeImage + 1) + " of " + imageArray.length);
    }

    new Effect.Parallel([new Effect.SlideDown("imageDataContainer", { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), new Effect.Appear("imageDataContainer", { sync: true, duration: resizeDuration })], {
      duration: resizeDuration,
      afterFinish: function () {
        // update overlay size and update nav
        var arrayPageSize = getPageSize();
        Element.setHeight("overlay", arrayPageSize[1]);
        myLightbox.updateNav();
      },
    });
  },

  //
  //	updateNav()
  //	Display appropriate previous and next hover navigation.
  //
  updateNav: function () {
    Element.show("hoverNav");

    // if not first image in set, display prev image button
    if (activeImage != 0) {
      Element.show("prevLink");
      document.getElementById("prevLink").onclick = function () {
        myLightbox.changeImage(activeImage - 1);
        return false;
      };
    }

    // if not last image in set, display next image button
    if (activeImage != imageArray.length - 1) {
      Element.show("nextLink");
      document.getElementById("nextLink").onclick = function () {
        myLightbox.changeImage(activeImage + 1);
        return false;
      };
    }

    this.enableKeyboardNav();
  },

  //
  //	enableKeyboardNav()
  //
  enableKeyboardNav: function () {
    document.onkeydown = this.keyboardAction;
  },

  //
  //	disableKeyboardNav()
  //
  disableKeyboardNav: function () {
    document.onkeydown = "";
  },

  //
  //	keyboardAction()
  //
  keyboardAction: function (e) {
    if (e == null) {
      // ie
      keycode = event.keyCode;
      escapeKey = 27;
    } else {
      // mozilla
      keycode = e.keyCode;
      escapeKey = e.DOM_VK_ESCAPE;
    }

    key = String.fromCharCode(keycode).toLowerCase();

    if (key == "x" || key == "o" || key == "c" || keycode == escapeKey) {
      // close lightbox
      myLightbox.end();
    } else if (key == "p" || keycode == 37) {
      // display previous image
      if (activeImage != 0) {
        myLightbox.disableKeyboardNav();
        myLightbox.changeImage(activeImage - 1);
      }
    } else if (key == "n" || keycode == 39) {
      // display next image
      if (activeImage != imageArray.length - 1) {
        myLightbox.disableKeyboardNav();
        myLightbox.changeImage(activeImage + 1);
      }
    }
  },

  //
  //	preloadNeighborImages()
  //	Preload previous and next images.
  //
  preloadNeighborImages: function () {
    if (imageArray.length - 1 > activeImage) {
      preloadNextImage = new Image();
      preloadNextImage.src = imageArray[activeImage + 1][0];
    }
    if (activeImage > 0) {
      preloadPrevImage = new Image();
      preloadPrevImage.src = imageArray[activeImage - 1][0];
    }
  },

  //
  //	end()
  //
  end: function () {
    this.disableKeyboardNav();
    Element.hide("lightbox");
    new Effect.Fade("overlay", { duration: overlayDuration });
    showSelectBoxes();
    showFlash();
  },
};

// -----------------------------------------------------------------------------------

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll() {
  var yScroll;

  if (self.pageYOffset) {
    yScroll = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) {
    // Explorer 6 Strict
    yScroll = document.documentElement.scrollTop;
  } else if (document.body) {
    // all other Explorers
    yScroll = document.body.scrollTop;
  }

  arrayPageScroll = new Array("", yScroll);
  return arrayPageScroll;
}

// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize() {
  var xScroll, yScroll;

  if (window.innerHeight && window.scrollMaxY) {
    xScroll = document.body.scrollWidth;
    yScroll = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight) {
    // all but Explorer Mac
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
  } else {
    // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
  }

  var windowWidth, windowHeight;
  if (self.innerHeight) {
    // all except Explorer
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
  } else if (document.body) {
    // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
  }

  // for small pages with total height less then height of the viewport
  if (yScroll < windowHeight) {
    pageHeight = windowHeight;
  } else {
    pageHeight = yScroll;
  }

  // for small pages with total width less then width of the viewport
  if (xScroll < windowWidth) {
    pageWidth = windowWidth;
  } else {
    pageWidth = xScroll;
  }

  arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
  return arrayPageSize;
}

// -----------------------------------------------------------------------------------

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e) {
  if (e == null) {
    // ie
    keycode = event.keyCode;
  } else {
    // mozilla
    keycode = e.which;
  }
  key = String.fromCharCode(keycode).toLowerCase();

  if (key == "x") {
  }
}

// -----------------------------------------------------------------------------------

//
// listenKey()
//
function listenKey() {
  document.onkeypress = getKey;
}

// ---------------------------------------------------

function showSelectBoxes() {
  var selects = document.getElementsByTagName("select");
  for (i = 0; i != selects.length; i++) {
    selects[i].style.visibility = "visible";
  }
}

// ---------------------------------------------------

function hideSelectBoxes() {
  var selects = document.getElementsByTagName("select");
  for (i = 0; i != selects.length; i++) {
    selects[i].style.visibility = "hidden";
  }
}

// ---------------------------------------------------

function showFlash() {
  var flashObjects = document.getElementsByTagName("object");
  for (i = 0; i != flashObjects.length; i++) {
    flashObjects[i].style.visibility = "visible";
  }

  var flashEmbeds = document.getElementsByTagName("embeds");
  for (i = 0; i != flashEmbeds.length; i++) {
    flashEmbeds[i].style.visibility = "visible";
  }
}

// ---------------------------------------------------

function hideFlash() {
  var flashObjects = document.getElementsByTagName("object");
  for (i = 0; i != flashObjects.length; i++) {
    flashObjects[i].style.visibility = "hidden";
  }

  var flashEmbeds = document.getElementsByTagName("embeds");
  for (i = 0; i != flashEmbeds.length; i++) {
    flashEmbeds[i].style.visibility = "hidden";
  }
}

// ---------------------------------------------------

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Help from Ran Bar-On [ran2103@gmail.com]
//

function pause(ms) {
  var date = new Date();
  curDate = null;
  do {
    var curDate = new Date();
  } while (curDate - date < ms);
}
/*
function pause(numberMillis) {
	var curently = new Date().getTime() + sender;
	while (new Date().getTime();	
}
*/
// ---------------------------------------------------

function initLightbox() {
  myLightbox = new Lightbox();
}
Event.observe(window, "load", initLightbox, false);
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html integrated js and css :








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cameraobscur.a.free.fr/lightbox/css/lightbox.ccccccccccccccccccss" type="text/css" media="screen">


<link rel="stylesheet" href="file:///C:/Users/Invit%C3%A9/Desktop/lightbox.css" type="text/css" media="screen">


<script type="text/javascript" src="http://cameraobscur.a.free.fr/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://cameraobscur.a.free.fr/lightbox/js/scriptaculous.js?load=effects"></script>


<script type="text/javascript" src="http://cameraobscur.a.free.fr/lightbox/js/lightbox.jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjs"></script>



<script type="text/javascript" src="file:///C:/Users/Invit%C3%A9/Desktop/lightbox.js"></script>






<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>camera obscura portfolio</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function correctPNG() // correction du bug concernant la transparence des images PNG avec Win IE 5.5 ou +. 
{ 
for(var i=0; i<document.images.length; i++) 
{ 
var img = document.images[i] 
var imgName = img.src.toUpperCase() 
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
{ 
var imgID = (img.id) ? "id='" + img.id + "' " : "" 
var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
var imgStyle = "display:inline-block;" + img.style.cssText 
var imgAttribs = img.attributes; 
for (var j=0; j<imgAttribs.length; j++) 
{ 
var imgAttrib = imgAttribs[j]; 
if (imgAttrib.nodeName == "align") 
{ 
if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle 
if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle 
break 
} 
} 
var strNewHTML = "<span " + imgID + imgClass + imgTitle 
strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
img.outerHTML = strNewHTML 
i = i-1 
} 
} 
} 
window.attachEvent("onload", correctPNG); 

correctPNG();

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</SCRIPT> 

<link href="http://cameraobscur.a.free.fr/fondcameraobscura.ccccccccccccccccccccccccccccccccccss" rel="stylesheet" type="text/css" />







<script>
// -----------------------------------------------------------------------------------
//
//	Lightbox v2.03
//	by Lokesh Dhakar - http://www.huddletogether.com
//	4/9/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- Object.extend(Element)
	- Array.prototype.removeDuplicates()
	- Array.prototype.empty()

	Lightbox Class Declaration
	- initialize()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Miscellaneous Functions
	- getPageScroll()
	- getPageSize()
	- getKey()
	- listenKey()
	- showSelectBoxes()
	- hideSelectBoxes()
	- showFlash()
	- hideFlash()
	- pause()
	- initLightbox()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "http://cameraobscur.a.free.fr/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "http://cameraobscur.a.free.fr/lightbox/images/closelabel.gif";

var animate = true; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array();
var activeImage;

if (animate == true) {
  overlayDuration = 0.2; // shadow fade in/out duration
  if (resizeSpeed > 10) {
    resizeSpeed = 10;
  }
  if (resizeSpeed < 1) {
    resizeSpeed = 1;
  }
  resizeDuration = (11 - resizeSpeed) * 0.15;
} else {
  overlayDuration = 0;
  resizeDuration = 0;
}

// -----------------------------------------------------------------------------------

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
  getWidth: function (element) {
    element = $(element);
    return element.offsetWidth;
  },
  setWidth: function (element, w) {
    element = $(element);
    element.style.width = w + "px";
  },
  setHeight: function (element, h) {
    element = $(element);
    element.style.height = h + "px";
  },
  setTop: function (element, t) {
    element = $(element);
    element.style.top = t + "px";
  },
  setSrc: function (element, src) {
    element = $(element);
    element.src = src;
  },
  setHref: function (element, href) {
    element = $(element);
    element.href = href;
  },
  setInnerHTML: function (element, content) {
    element = $(element);
    element.innerHTML = content;
  },
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
  for (i = 0; i < this.length; i++) {
    for (j = this.length - 1; j > i; j--) {
      if (this[i][0] == this[j][0]) {
        this.splice(j, 1);
      }
    }
  }
};

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
  for (i = 0; i <= this.length; i++) {
    this.shift();
  }
};

// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Lightbox = Class.create();

Lightbox.prototype = {
  // initialize()
  // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
  // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
  // the function inserts html at the bottom of the page which is used to display the shadow
  // overlay and the image container.
  //
  initialize: function () {
    if (!document.getElementsByTagName) {
      return;
    }
    var anchors = document.getElementsByTagName("a");
    var areas = document.getElementsByTagName("area");

    // loop through all anchor tags
    for (var i = 0; i < anchors.length; i++) {
      var anchor = anchors[i];

      var relAttribute = String(anchor.getAttribute("rel"));

      // use the string.match() method to catch 'lightbox' references in the rel attribute
      if (anchor.getAttribute("href") && relAttribute.toLowerCase().match("lightbox")) {
        anchor.onclick = function () {
          myLightbox.start(this);
          return false;
        };
      }
    }

    // loop through all area tags
    // todo: combine anchor & area tag loops
    for (var i = 0; i < areas.length; i++) {
      var area = areas[i];

      var relAttribute = String(area.getAttribute("rel"));

      // use the string.match() method to catch 'lightbox' references in the rel attribute
      if (area.getAttribute("href") && relAttribute.toLowerCase().match("lightbox")) {
        area.onclick = function () {
          myLightbox.start(this);
          return false;
        };
      }
    }

    // The rest of this code inserts html at the bottom of the page that looks similar to this:
    //
    //	<div id="overlay"></div>
    //	<div id="lightbox">
    //		<div id="outerImageContainer">
    //			<div id="imageContainer">
    //				<img id="lightboxImage">
    //				<div style="" id="hoverNav">
    //					<a href="#" id="prevLink"></a>
    //					<a href="#" id="nextLink"></a>
    //				</div>
    //				<div id="loading">
    //					<a href="#" id="loadingLink">
    //						<img src="http://cameraobscur.a.free.fr/lightbox/images/loading.gif">
    //					</a>
    //				</div>
    //			</div>
    //		</div>
    //		<div id="imageDataContainer">
    //			<div id="imageData">
    //				<div id="imageDetails">
    //					<span id="caption"></span>
    //					<span id="numberDisplay"></span>
    //				</div>
    //				<div id="bottomNav">
    //					<a href="#" id="bottomNavClose">
    //						<img src="http://cameraobscur.a.free.fr/lightbox/images/close.gif">
    //					</a>
    //				</div>
    //			</div>
    //		</div>
    //	</div>

    var objBody = document.getElementsByTagName("body").item(0);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute("id", "overlay");
    objOverlay.style.display = "none";
    objOverlay.onclick = function () {
      myLightbox.end();
    };
    objBody.appendChild(objOverlay);

    var objLightbox = document.createElement("div");
    objLightbox.setAttribute("id", "lightbox");
    objLightbox.style.display = "none";
    objLightbox.onclick = function (e) {
      // close Lightbox is user clicks shadow overlay
      if (!e) var e = window.event;
      var clickObj = Event.element(e).id;
      if (clickObj == "lightbox") {
        myLightbox.end();
      }
    };
    objBody.appendChild(objLightbox);

    var objOuterImageContainer = document.createElement("div");
    objOuterImageContainer.setAttribute("id", "outerImageContainer");
    objLightbox.appendChild(objOuterImageContainer);

    // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    // If animations are turned off, it will be hidden as to prevent a flicker of a
    // white 250 by 250 box.
    if (animate) {
      Element.setWidth("outerImageContainer", 250);
      Element.setHeight("outerImageContainer", 250);
    } else {
      Element.setWidth("outerImageContainer", 1);
      Element.setHeight("outerImageContainer", 1);
    }

    var objImageContainer = document.createElement("div");
    objImageContainer.setAttribute("id", "imageContainer");
    objOuterImageContainer.appendChild(objImageContainer);

    var objLightboxImage = document.createElement("img");
    objLightboxImage.setAttribute("id", "lightboxImage");
    objImageContainer.appendChild(objLightboxImage);

    var objHoverNav = document.createElement("div");
    objHoverNav.setAttribute("id", "hoverNav");
    objImageContainer.appendChild(objHoverNav);

    var objPrevLink = document.createElement("a");
    objPrevLink.setAttribute("id", "prevLink");
    objPrevLink.setAttribute("href", "#");
    objHoverNav.appendChild(objPrevLink);

    var objNextLink = document.createElement("a");
    objNextLink.setAttribute("id", "nextLink");
    objNextLink.setAttribute("href", "#");
    objHoverNav.appendChild(objNextLink);

    var objLoading = document.createElement("div");
    objLoading.setAttribute("id", "loading");
    objImageContainer.appendChild(objLoading);

    var objLoadingLink = document.createElement("a");
    objLoadingLink.setAttribute("id", "loadingLink");
    objLoadingLink.setAttribute("href", "#");
    objLoadingLink.onclick = function () {
      myLightbox.end();
      return false;
    };
    objLoading.appendChild(objLoadingLink);

    var objLoadingImage = document.createElement("img");
    objLoadingImage.setAttribute("src", fileLoadingImage);
    objLoadingLink.appendChild(objLoadingImage);

    var objImageDataContainer = document.createElement("div");
    objImageDataContainer.setAttribute("id", "imageDataContainer");
    objImageDataContainer.className = "clearfix";
    objLightbox.appendChild(objImageDataContainer);

    var objImageData = document.createElement("div");
    objImageData.setAttribute("id", "imageData");
    objImageDataContainer.appendChild(objImageData);

    var objImageDetails = document.createElement("div");
    objImageDetails.setAttribute("id", "imageDetails");
    objImageData.appendChild(objImageDetails);

    var objCaption = document.createElement("span");
    objCaption.setAttribute("id", "caption");
    objImageDetails.appendChild(objCaption);

    var objNumberDisplay = document.createElement("span");
    objNumberDisplay.setAttribute("id", "numberDisplay");
    objImageDetails.appendChild(objNumberDisplay);

    var objBottomNav = document.createElement("div");
    objBottomNav.setAttribute("id", "bottomNav");
    objImageData.appendChild(objBottomNav);

    var objBottomNavCloseLink = document.createElement("a");
    objBottomNavCloseLink.setAttribute("id", "bottomNavClose");
    objBottomNavCloseLink.setAttribute("href", "#");
    objBottomNavCloseLink.onclick = function () {
      myLightbox.end();
      return false;
    };
    objBottomNav.appendChild(objBottomNavCloseLink);

    var objBottomNavCloseImage = document.createElement("img");
    objBottomNavCloseImage.setAttribute("src", fileBottomNavCloseImage);
    objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
  },

  //
  //	start()
  //	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
  //
  start: function (imageLink) {
    hideSelectBoxes();
    hideFlash();

    // stretch overlay to fill page and fade in
    var arrayPageSize = getPageSize();
    Element.setHeight("overlay", arrayPageSize[1]);

    new Effect.Appear("overlay", { duration: overlayDuration, from: 0.0, to: 0.8 });

    imageArray = [];
    imageNum = 0;

    if (!document.getElementsByTagName) {
      return;
    }
    var anchors = document.getElementsByTagName("a");

    // if image is NOT part of a set..
    if (imageLink.getAttribute("rel") == "lightbox") {
      // add single image to imageArray
      imageArray.push(new Array(imageLink.getAttribute("href"), imageLink.getAttribute("title")));
    } else {
      // if image is part of a set..

      // loop through anchors, find other images in set, and add them to imageArray
      for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        if (anchor.getAttribute("href") && anchor.getAttribute("rel") == imageLink.getAttribute("rel")) {
          imageArray.push(new Array(anchor.getAttribute("href"), anchor.getAttribute("title")));
        }
      }
      imageArray.removeDuplicates();
      while (imageArray[imageNum][0] != imageLink.getAttribute("href")) {
        imageNum++;
      }
    }

    // calculate top offset for the lightbox and display
    var arrayPageScroll = getPageScroll();
    var lightboxTop = arrayPageScroll[1] + arrayPageSize[3] / 10;

    Element.setTop("lightbox", lightboxTop);
    Element.show("lightbox");

    this.changeImage(imageNum);
  },

  //
  //	changeImage()
  //	Hide most elements and preload image in preparation for resizing image container.
  //
  changeImage: function (imageNum) {
    activeImage = imageNum; // update global var

    // hide elements during transition
    if (animate) {
      Element.show("loading");
    }
    Element.hide("lightboxImage");
    Element.hide("hoverNav");
    Element.hide("prevLink");
    Element.hide("nextLink");
    Element.hide("imageDataContainer");
    Element.hide("numberDisplay");

    imgPreloader = new Image();

    // once image is preloaded, resize image container
    imgPreloader.onload = function () {
      Element.setSrc("lightboxImage", imageArray[activeImage][0]);
      myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    };
    imgPreloader.src = imageArray[activeImage][0];
  },

  //
  //	resizeImageContainer()
  //
  resizeImageContainer: function (imgWidth, imgHeight) {
    // get curren width and height
    this.widthCurrent = Element.getWidth("outerImageContainer");
    this.heightCurrent = Element.getHeight("outerImageContainer");

    // get new width and height
    var widthNew = imgWidth + borderSize * 2;
    var heightNew = imgHeight + borderSize * 2;

    // scalars based on change from old to new
    this.xScale = (widthNew / this.widthCurrent) * 100;
    this.yScale = (heightNew / this.heightCurrent) * 100;

    // calculate size difference between new and old image, and resize if necessary
    wDiff = this.widthCurrent - widthNew;
    hDiff = this.heightCurrent - heightNew;

    if (!(hDiff == 0)) {
      new Effect.Scale("outerImageContainer", this.yScale, { scaleX: false, duration: resizeDuration, queue: "front" });
    }
    if (!(wDiff == 0)) {
      new Effect.Scale("outerImageContainer", this.xScale, { scaleY: false, delay: resizeDuration, duration: resizeDuration });
    }

    // if new and old image are same size and no scaling transition is necessary,
    // do a quick pause to prevent image flicker.
    if (hDiff == 0 && wDiff == 0) {
      if (navigator.appVersion.indexOf("MSIE") != -1) {
        pause(250);
      } else {
        pause(100);
      }
    }

    Element.setHeight("prevLink", imgHeight);
    Element.setHeight("nextLink", imgHeight);
    Element.setWidth("imageDataContainer", widthNew);

    this.showImage();
  },

  //
  //	showImage()
  //	Display image and begin preloading neighbors.
  //
  showImage: function () {
    Element.hide("loading");
    new Effect.Appear("lightboxImage", {
      duration: resizeDuration,
      queue: "end",
      afterFinish: function () {
        myLightbox.updateDetails();
      },
    });
    this.preloadNeighborImages();
  },

  //
  //	updateDetails()
  //	Display caption, image number, and bottom nav.
  //
  updateDetails: function () {
    Element.show("caption");
    Element.setInnerHTML("caption", imageArray[activeImage][1]);

    // if image is part of set display 'Image x of x'
    if (imageArray.length > 1) {
      Element.show("numberDisplay");
      Element.setInnerHTML("numberDisplay", "Image " + eval(activeImage + 1) + " of " + imageArray.length);
    }

    new Effect.Parallel([new Effect.SlideDown("imageDataContainer", { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), new Effect.Appear("imageDataContainer", { sync: true, duration: resizeDuration })], {
      duration: resizeDuration,
      afterFinish: function () {
        // update overlay size and update nav
        var arrayPageSize = getPageSize();
        Element.setHeight("overlay", arrayPageSize[1]);
        myLightbox.updateNav();
      },
    });
  },

  //
  //	updateNav()
  //	Display appropriate previous and next hover navigation.
  //
  updateNav: function () {
    Element.show("hoverNav");

    // if not first image in set, display prev image button
    if (activeImage != 0) {
      Element.show("prevLink");
      document.getElementById("prevLink").onclick = function () {
        myLightbox.changeImage(activeImage - 1);
        return false;
      };
    }

    // if not last image in set, display next image button
    if (activeImage != imageArray.length - 1) {
      Element.show("nextLink");
      document.getElementById("nextLink").onclick = function () {
        myLightbox.changeImage(activeImage + 1);
        return false;
      };
    }

    this.enableKeyboardNav();
  },

  //
  //	enableKeyboardNav()
  //
  enableKeyboardNav: function () {
    document.onkeydown = this.keyboardAction;
  },

  //
  //	disableKeyboardNav()
  //
  disableKeyboardNav: function () {
    document.onkeydown = "";
  },

  //
  //	keyboardAction()
  //
  keyboardAction: function (e) {
    if (e == null) {
      // ie
      keycode = event.keyCode;
      escapeKey = 27;
    } else {
      // mozilla
      keycode = e.keyCode;
      escapeKey = e.DOM_VK_ESCAPE;
    }

    key = String.fromCharCode(keycode).toLowerCase();

    if (key == "x" || key == "o" || key == "c" || keycode == escapeKey) {
      // close lightbox
      myLightbox.end();
    } else if (key == "p" || keycode == 37) {
      // display previous image
      if (activeImage != 0) {
        myLightbox.disableKeyboardNav();
        myLightbox.changeImage(activeImage - 1);
      }
    } else if (key == "n" || keycode == 39) {
      // display next image
      if (activeImage != imageArray.length - 1) {
        myLightbox.disableKeyboardNav();
        myLightbox.changeImage(activeImage + 1);
      }
    }
  },

  //
  //	preloadNeighborImages()
  //	Preload previous and next images.
  //
  preloadNeighborImages: function () {
    if (imageArray.length - 1 > activeImage) {
      preloadNextImage = new Image();
      preloadNextImage.src = imageArray[activeImage + 1][0];
    }
    if (activeImage > 0) {
      preloadPrevImage = new Image();
      preloadPrevImage.src = imageArray[activeImage - 1][0];
    }
  },

  //
  //	end()
  //
  end: function () {
    this.disableKeyboardNav();
    Element.hide("lightbox");
    new Effect.Fade("overlay", { duration: overlayDuration });
    showSelectBoxes();
    showFlash();
  },
};

// -----------------------------------------------------------------------------------

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll() {
  var yScroll;

  if (self.pageYOffset) {
    yScroll = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) {
    // Explorer 6 Strict
    yScroll = document.documentElement.scrollTop;
  } else if (document.body) {
    // all other Explorers
    yScroll = document.body.scrollTop;
  }

  arrayPageScroll = new Array("", yScroll);
  return arrayPageScroll;
}

// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize() {
  var xScroll, yScroll;

  if (window.innerHeight && window.scrollMaxY) {
    xScroll = document.body.scrollWidth;
    yScroll = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight) {
    // all but Explorer Mac
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
  } else {
    // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
  }

  var windowWidth, windowHeight;
  if (self.innerHeight) {
    // all except Explorer
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
  } else if (document.body) {
    // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
  }

  // for small pages with total height less then height of the viewport
  if (yScroll < windowHeight) {
    pageHeight = windowHeight;
  } else {
    pageHeight = yScroll;
  }

  // for small pages with total width less then width of the viewport
  if (xScroll < windowWidth) {
    pageWidth = windowWidth;
  } else {
    pageWidth = xScroll;
  }

  arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
  return arrayPageSize;
}

// -----------------------------------------------------------------------------------

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e) {
  if (e == null) {
    // ie
    keycode = event.keyCode;
  } else {
    // mozilla
    keycode = e.which;
  }
  key = String.fromCharCode(keycode).toLowerCase();

  if (key == "x") {
  }
}

// -----------------------------------------------------------------------------------

//
// listenKey()
//
function listenKey() {
  document.onkeypress = getKey;
}

// ---------------------------------------------------

function showSelectBoxes() {
  var selects = document.getElementsByTagName("select");
  for (i = 0; i != selects.length; i++) {
    selects[i].style.visibility = "visible";
  }
}

// ---------------------------------------------------

function hideSelectBoxes() {
  var selects = document.getElementsByTagName("select");
  for (i = 0; i != selects.length; i++) {
    selects[i].style.visibility = "hidden";
  }
}

// ---------------------------------------------------

function showFlash() {
  var flashObjects = document.getElementsByTagName("object");
  for (i = 0; i != flashObjects.length; i++) {
    flashObjects[i].style.visibility = "visible";
  }

  var flashEmbeds = document.getElementsByTagName("embeds");
  for (i = 0; i != flashEmbeds.length; i++) {
    flashEmbeds[i].style.visibility = "visible";
  }
}

// ---------------------------------------------------

function hideFlash() {
  var flashObjects = document.getElementsByTagName("object");
  for (i = 0; i != flashObjects.length; i++) {
    flashObjects[i].style.visibility = "hidden";
  }

  var flashEmbeds = document.getElementsByTagName("embeds");
  for (i = 0; i != flashEmbeds.length; i++) {
    flashEmbeds[i].style.visibility = "hidden";
  }
}

// ---------------------------------------------------

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Help from Ran Bar-On [ran2103@gmail.com]
//

function pause(ms) {
  var date = new Date();
  curDate = null;
  do {
    var curDate = new Date();
  } while (curDate - date < ms);
}
/*
function pause(numberMillis) {
	var curently = new Date().getTime() + sender;
	while (new Date().getTime();	
}
*/
// ---------------------------------------------------

function initLightbox() {
  myLightbox = new Lightbox();
}
Event.observe(window, "load", initLightbox, false);






</script>



<style>
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
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          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/richard2.jpg" rel="lightbox[photo]"title="Richard.2"><img src="http://cameraobscur.a.free.fr/ptiteimg/richard2.jpg" alt="richard" width="85" height="56" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/richard3.jpg" rel="lightbox[photo]"title="Richard.3"><img src="http://cameraobscur.a.free.fr/ptiteimg/richard3.jpg" alt="richard" width="85" height="56" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/tour-centree.jpg" rel="lightbox[photo]"title="Tour-centrée"><img src="http://cameraobscur.a.free.fr/ptiteimg/tour-centree.jpg" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/tour-decalee.jpg" rel="lightbox[photo]"title="Tour-decalée"><img src="http://cameraobscur.a.free.fr/ptiteimg/tour-decalee.jpg" alt="tour" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/traction-1.jpg" rel="lightbox[photo]"title="Traction-1"><img src="http://cameraobscur.a.free.fr/ptiteimg/traction-1.jpg" alt="traction" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/traction-2.jpg" rel="lightbox[photo]"title="Traction-2"><img src="http://cameraobscur.a.free.fr/ptiteimg/traction-2.jpg" alt="traction" width="85" height="85" border="0" /></a></td>
        </tr>
      </table>
    </div>
   </td>
  </tr>
</table>
</center>
</body>
</html>
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html out js and css:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cameraobscur.a.free.fr/lightbox/css/lightbox.ccccccccccccccccccss" type="text/css" media="screen">


<link rel="stylesheet" href="file:///C:/Users/Invit%C3%A9/Desktop/lightbox.css" type="text/css" media="screen">


<script type="text/javascript" src="http://cameraobscur.a.free.fr/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://cameraobscur.a.free.fr/lightbox/js/scriptaculous.js?load=effects"></script>


<script type="text/javascript" src="http://cameraobscur.a.free.fr/lightbox/js/lightbox.jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjs"></script>



<script type="text/javascript" src="file:///C:/Users/Invit%C3%A9/Desktop/lightbox.js"></script>






<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>camera obscura portfolio</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function correctPNG() // correction du bug concernant la transparence des images PNG avec Win IE 5.5 ou +. 
{ 
for(var i=0; i<document.images.length; i++) 
{ 
var img = document.images[i] 
var imgName = img.src.toUpperCase() 
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
{ 
var imgID = (img.id) ? "id='" + img.id + "' " : "" 
var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
var imgStyle = "display:inline-block;" + img.style.cssText 
var imgAttribs = img.attributes; 
for (var j=0; j<imgAttribs.length; j++) 
{ 
var imgAttrib = imgAttribs[j]; 
if (imgAttrib.nodeName == "align") 
{ 
if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle 
if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle 
break 
} 
} 
var strNewHTML = "<span " + imgID + imgClass + imgTitle 
strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
img.outerHTML = strNewHTML 
i = i-1 
} 
} 
} 
window.attachEvent("onload", correctPNG); 

correctPNG();

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</SCRIPT> 

<link href="http://cameraobscur.a.free.fr/fondcameraobscura.ccccccccccccccccccccccccccccccccccss" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-image: none;
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: 0px;
	background-color: #000000;
}
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-image: none;
	background-repeat: no-repeat;
	background-position: center top;
}
#images {
	position:relative;
	width:440px;
	height:340px;
	z-index:1;
	left: 100px;
	top: 40px;
	overflow: auto;
	background-color: #000000;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
}
#webdesigner {	position:relative;
	left:710px;
	top:780px;
	width:56px;
	height:52px;
	z-index:3;
}
#Layer1 {
	position:absolute;
	left:104px;
	top:781px;
	width:49px;
	height:44px;
	z-index:4;
}
-->
</style>
<meta name="description" content="site de photographie professionnelle, clair obscur, camera obscura" />
</head>

<body>
<center>
<table>
  
  <tr>
    <td>
      <table width="415" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000"><a href="http://cameraobscur.a.free.fr/imggrande/14.jpg" rel="lightbox[photo]"title="Chanteur"><img src="http://cameraobscur.a.free.fr/ptiteimg/14.jpg" alt="14" width="85" height="60" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizell1.jpg" rel="lightbox[photo]"title="Aizell.1"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizell1.jpg" alt="aizell" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizell2.jpg" rel="lightbox[photo]"title="Aizell.2"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizell2.jpg" alt="aizell" width="85" height="82" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizell3.jpg" rel="lightbox[photo]"title="Aizell.3"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizell3.jpg" alt="aizell" width="85" height="85" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizell4.jpg" rel="lightbox[photo]"title="Aizell.4"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizell4.jpg" alt="aizel" width="85" height="57" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizell5.jpg" rel="lightbox[photo]"title="Aizell.5"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizell5.jpg" alt="aizel" width="59" height="88" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizell6.jpg" rel="lightbox[photo]"title="Aizell.6"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizell6.jpg" alt="aizel" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizellgratt.jpg" rel="lightbox[photo]"title="Gratt"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizellgratt.jpg" alt="aizel" width="85" height="56" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizellmarilin-copie.jpg" rel="lightbox[photo]"title="Marilyn"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizellmarilin-copie.jpg" alt="aizell" width="62" height="91" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/aizellpeut.jpg" rel="lightbox[photo]"title="Peut"><img src="http://cameraobscur.a.free.fr/ptiteimg/aizellpeut.jpg" alt="aizell" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/arbre.jpg" rel="lightbox[photo]"title="Saule"><img src="http://cameraobscur.a.free.fr/ptiteimg/arbre.jpg" alt="arbre" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/arbrefeuilles.jpg" rel="lightbox[photo]"title="Texture feuilles"><img src="http://cameraobscur.a.free.fr/ptiteimg/arbrefeuilles.jpg" alt="feuilles" width="85" height="57" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/arbreforetdeslandes.jpg" rel="lightbox[photo]"title="Forêt des Landes"><img src="http://cameraobscur.a.free.fr/ptiteimg/arbreforetdeslandes.jpg" alt="foret" width="85" height="56" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/arbrelune.jpg" rel="lightbox[photo]"title="Lune"><img src="http://cameraobscur.a.free.fr/ptiteimg/arbrelune.jpg" alt="lune" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/arbrenuages.jpg" rel="lightbox[photo]"title="Nuages"><img src="http://cameraobscur.a.free.fr/ptiteimg/arbrenuages.jpg" alt="nuages" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/arbrestenope.jpg" rel="lightbox[photo]"title="Sténopé"><img src="http://cameraobscur.a.free.fr/ptiteimg/arbrestenope.jpg" alt="stenope" width="85" height="63" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/autoportrait.jpg" rel="lightbox[photo]"title="Autoportrait"><img src="http://cameraobscur.a.free.fr/ptiteimg/autoportrait.jpg" alt="autoportrait" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/autoportrait3.jpg" rel="lightbox[photo]"title="Autoportrait.2"><img src="http://cameraobscur.a.free.fr/ptiteimg/autoportrait3.jpg" alt="autoportrait" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/baignoire.jpg" rel="lightbox[photo]"title="Baignore"><img src="http://cameraobscur.a.free.fr/ptiteimg/baignoire.jpg" alt="baignore" width="85" height="83" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/bAirbus.jpg" rel="lightbox[photo]"title="Airbus"><img src="http://cameraobscur.a.free.fr/ptiteimg/bAirbus.jpg" alt="airbus" width="85" height="56" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/balade.jpg" rel="lightbox[photo]"title="Ballade"><img src="http://cameraobscur.a.free.fr/ptiteimg/balade.jpg" alt="balade" width="85" height="56" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/bpaisible.jpg" rel="lightbox[photo]"title="Paisible"><img src="http://cameraobscur.a.free.fr/ptiteimg/bpaisible.jpg" alt="paisible" width="85" height="56" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/bpromenade.jpg" rel="lightbox[photo]"title="Promenade"><img src="http://cameraobscur.a.free.fr/ptiteimg/bpromenade.jpg" alt="promenade" width="85" height="58" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/campement-degrad2.jpg" rel="lightbox[photo]"title="degradé"><img src="http://cameraobscur.a.free.fr/ptiteimg/campement-degrad2.jpg" alt="campement" width="85" height="85" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/campement-degrade.jpg" rel="lightbox[photo]"title="degradé 2"><img src="http://cameraobscur.a.free.fr/ptiteimg/campement-degrade.jpg" alt="campement" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/campement.jpg" rel="lightbox[photo]"title="Campement"><img src="http://cameraobscur.a.free.fr/ptiteimg/campement.jpg" alt="campement" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/ciel-de-stbarth.jpg" rel="lightbox[photo]"title="Ciel-stBarth"><img src="http://cameraobscur.a.free.fr/ptiteimg/ciel-de-stbarth.jpg" alt="ciel" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/couchesoleilmarseillan.jpg" rel="lightbox[photo]"title="Crépuscule"><img src="http://cameraobscur.a.free.fr/ptiteimg/couchesoleilmarseillan.jpg" alt="couchesoleil" width="85" height="54" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/cplage-stbarth.jpg" rel="lightbox[photo]"title="Plage stBarth"><img src="http://cameraobscur.a.free.fr/ptiteimg/cplage-stbarth.jpg" alt="plage" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/desert.jpg" rel="lightbox[photo]"title="Desert"><img src="http://cameraobscur.a.free.fr/ptiteimg/desert.jpg" alt="desert" width="85" height="53" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/Envers.jpg" rel="lightbox[photo]"title="Envers"><img src="http://cameraobscur.a.free.fr/ptiteimg/Envers.jpg" alt="envers" width="85" height="57" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/evier.jpg" rel="lightbox[photo]"title="Evier"><img src="http://cameraobscur.a.free.fr/ptiteimg/evier.jpg" alt="evier" width="85" height="56" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuela-cyril.jpg" rel="lightbox[photo]"title="Manuela et Cyril"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuela-cyril.jpg" alt="mano" width="85" height="86" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuela-et-cyril-besos.jpg" rel="lightbox[photo]"title="Besos"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuela-et-cyril-besos.jpg" alt="mano" width="85" height="86" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuela-et-cyril-contre-jou.jpg" rel="lightbox[photo]"title="Contre-jour"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuela-et-cyril-contre-jou.jpg" alt="manocyril" width="85" height="85" border="0" /></a></td>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuela-mariage-serenite.jpg" rel="lightbox[photo]"title="Serenite"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuela-mariage-serenite.jpg" width="85" height="85" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuela-mariage-voile.jpg" rel="lightbox[photo]"title="Voile"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuela-mariage-voile.jpg" alt="mano" width="85" height="85" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuela-mariage.jpg" rel="lightbox[photo]"title="Mano"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuela-mariage.jpg" alt="mano" width="85" height="85" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/manuelacyril-portrait.jpg" rel="lightbox[photo]"title="Cyrill"><img src="http://cameraobscur.a.free.fr/ptiteimg/manuelacyril-portrait.jpg" alt="mano" width="85" height="86" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/marguerittes.jpg" rel="lightbox[photo]"title="Marguerittes"><img src="http://cameraobscur.a.free.fr/ptiteimg/marguerittes.jpg" alt="margueritte" width="85" height="57" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/mattio-sourire.jpg" rel="lightbox[photo]"title="Sourire"><img src="http://cameraobscur.a.free.fr/ptiteimg/mattio-sourire.jpg" alt="mattio" width="85" height="85" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/mattio.jpg" rel="lightbox[photo]"title="Mattio"><img src="http://cameraobscur.a.free.fr/ptiteimg/mattio.jpg" alt="mattio" width="85" height="85" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/mattioparent.jpg" rel="lightbox[photo]"title="Bonheur"><img src="http://cameraobscur.a.free.fr/ptiteimg/mattioparent.jpg" alt="mariage" width="85" height="85" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/nue-1.jpg" rel="lightbox[photo]"title="Nue.1"><img src="http://cameraobscur.a.free.fr/ptiteimg/nue-1.jpg" alt="nue" width="85" height="29" border="0" /></a></td>
        </tr>
        <tr>
          <td width="80" height="90" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/nue-2.jpg" rel="lightbox[photo]"title="Nue.2"><img src="http://cameraobscur.a.free.fr/ptiteimg/nue-2.jpg" alt="nue" width="85" height="85" border="0" /></a></td>
          <td width="80" height="0" align="center" valign="middle" bgcolor="#000000" class="Style5"><a href="http://cameraobscur.a.free.fr/imggrande/nue-3.jpg" rel="lightbox[photo]"title="Nue.3"><img src="http://cameraobscur.a.free.fr/ptiteimg/nue-3.jpg" alt="nue" width="85" height="85" border="0" /></a></td>
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